

function buttonsInit(){
	
	//create fruits Button
		var fruitsButton = document.createElement("button");
		fruitsButton.title = "create fruit";
		fruitsButton.innerText = "+";
		
		fruitsContainer.appendChild(fruitsButton);
		
		handlers.fruitsButton = function(){
											newFruit();
										}
		fruitsButton.addEventListener("click", handlers.fruitsButton, false);				
	
	//create goals Button
		var goalsButton = document.createElement("button");
		goalsButton.title = "create goal";
		goalsButton.innerText = "+";
		
		goalsContainer.appendChild(goalsButton);
		
		handlers.goalsButton = function(){
											newGoal();
										}
		goalsButton.addEventListener("click", handlers.goalsButton, false);										
		

	//create premises Button
		var premisesButton = document.createElement("button");
		premisesButton.title = "create premise";
		premisesButton.innerText = "+";
		
		premisesContainer.appendChild(premisesButton);
		
		handlers.premisesButton = function(){
											newPremise();
										}
		premisesButton.addEventListener("click", handlers.premisesButton, false);										

	//create arguments Button
		var argumentsButton = document.createElement("button");
		argumentsButton.title = "create support";
		argumentsButton.id = "argumentsButton";
		argumentsButton.innerText = "+";
		
		argumentsContainer.appendChild(argumentsButton);
		
		handlers.argumentsButton = function(){
											//this goes to container button because thinking about
											//giving user choice of what kind of node they want to make
											containerButton();
										}
		argumentsButton.addEventListener("click", handlers.argumentsButton, false);										


	//for contolling dimming when typing
	window.typing = false;
	
	expandFruitsButton();
	expandGoalsButton();
	expandPremisesButton();
	
}

//reference code

	//handlers.hotkeysGlobal = function(event) { return hotkeysGlobal(event) };
	//	thingy.addEventListener('keydown', handlers.hotkeysGlobal, false);

function expandFruitsButton(){
	
	window.fruitssExpanded = false;
	
	window.expandFruitsButton = document.createElement("div");
	
	window.expandedHeightFruits = 65;
	
	expandFruitsButton.id = "expandFruitsButton";
	expandFruitsButton.title = "show";
	expandFruitsButton.innerText = "»";
	
	fruitsContainer.appendChild(expandFruitsButton);
	
	handlers.expandFruits = function(){ 
										if(fruitsExpanded == false){											
											fruitsContainer.style.height = expandedHeightFruits + "px";
											
											expandFruitsButton.style.webkitTransform = "rotate(270deg)";
											expandFruitsButton.title = "hide";
											
											fruitsExpanded = true;
											
										}else{
											expandedHeightFruits = fruitsContainer.offsetHeight;
											fruitsContainer.style.height = "65px";
											
											expandFruitsButton.style.webkitTransform = "rotate(90deg)";
											expandFruitsButton.title = "expand";
											
											fruitsExpanded = false;
										}
										
									};
	
	expandFruitsButton.addEventListener("click", handlers.expandFruits, false);
}

function expandGoalsButton(){
	
	window.goalsExpanded = false;
	
	window.expandGoalsButton = document.createElement("div");
	
	window.expandedHeightGoals = 65;
	
	expandGoalsButton.id = "expandGoalsButton";
	expandGoalsButton.title = "show";
	expandGoalsButton.innerText = "»";
	
	goalsContainer.appendChild(expandGoalsButton);
	
	handlers.expandGoals = function(){ 
										if(goalsExpanded == false){											
											goalsContainer.style.height = expandedHeightGoals + "px";
											
											expandGoalsButton.style.webkitTransform = "rotate(270deg)";
											expandGoalsButton.title = "hide";
											
											goalsExpanded = true;
											
										}else{
											expandedHeightGoals = goalsContainer.offsetHeight;
											goalsContainer.style.height = "65px";
											
											expandGoalsButton.style.webkitTransform = "rotate(90deg)";
											expandGoalsButton.title = "expand";
											
											goalsExpanded = false;
										}
										
									};
	
	expandGoalsButton.addEventListener("click", handlers.expandGoals, false);
}

function expandPremisesButton(){
	
	window.premisesExpanded = false;
	
	window.expandPremisesButton = document.createElement("div");
	
	window.expandedHeightPremises = 65;	
	
	expandPremisesButton.id = "expandPremisesButton";
	expandPremisesButton.title = "show";
	expandPremisesButton.innerText = "»";
	
	premisesContainer.appendChild(expandPremisesButton);
	
	handlers.expandPremises = function(){ 
										if(premisesExpanded == false){
											premisesContainer.style.height = expandedHeightPremises + "px";
											
											expandPremisesButton.style.webkitTransform = "rotate(270deg)";
											expandPremisesButton.title = "hide";
											
											premisesExpanded = true;
											
										}else{
											expandedHeightPremises = premisesContainer.offsetHeight;
											premisesContainer.style.height = "65px";
											
											expandPremisesButton.style.webkitTransform = "rotate(90deg)";
											expandPremisesButton.title = "expand";
											
											premisesExpanded = false;
										}
										
									};
	
	expandPremisesButton.addEventListener("click", handlers.expandPremises, false);
}
//determines if so many goals that need to show "expand goals" button
function needExpand(close, type){
	
	//Fruits
		//make sure there are at least one fruit (the fourth child) and that the user did something with a fruit
		if (fruitsContainer.children[3])
		{
			
			var lowestFruit = fruitsContainer.lastChild.offsetTop - 5 + 63;  //minus margin, plus total height
			
			//a new fruit is being made
			if( (close !== "close") && (type == "fruit") ){
				
				//if have fruits on the second line
				if(lowestFruit > 65){
					//if fruits container needs to be bigger
					if( lowestFruit > expandedHeightFruits ){
						expandedHeightFruits += 63;
					}
					//if doesn't need to be bigger, just set it to the expanded height
					fruitsContainer.style.height = expandedHeightFruits + "px";
					expandFruitsButton.style.visibility = "visible";
					expandFruitsButton.style.webkitTransform = "rotate(270deg)";
					expandFruitsButton.title = "hide";
					fruitsExpanded = true;
				}
				
			}else{//in the case that a node is being closed
				//if need less space, make container smaller
				if( (lowestFruit + 63) < expandedHeightFruits ){
					expandedHeightFruits -= 63;
					//if expanded, set visible height to shorter
					fruitsExpanded ?	(fruitsContainer.style.height = expandedHeightFruits + "px") : false;
				}
				
				//if everything fits on one line, hide expand button
				if(lowestFruit <65 ){
					expandFruitsButton.style.visibility = "hidden";
				}
			}
		}
	
	//Goals
		//make sure there are at least one goal (the fourth child) and that the user did something with a goal
		if (goalsContainer.children[3])
		{
			
			var lowestGoal = goalsContainer.lastChild.offsetTop - 5 + 63;  //minus margin, plus total height
			
			//a new goal is being made
			if( (close !== "close") && (type == "goal") ){
				
				//if have goals on the second line
				if(lowestGoal > 65){
					//if goals container needs to be bigger
					if( lowestGoal > expandedHeightGoals ){
						expandedHeightGoals += 63;
					}
					//if doesn't need to be bigger, just set it to the expanded height
					goalsContainer.style.height = expandedHeightGoals + "px";
					expandGoalsButton.style.visibility = "visible";
					expandGoalsButton.style.webkitTransform = "rotate(270deg)";
					expandGoalsButton.title = "hide";
					goalsExpanded = true;
				}
				
			}else{//in the case that a node is being closed
				//if need less space, make container smaller
				if( (lowestGoal + 63) < expandedHeightGoals ){
					expandedHeightGoals -= 63;
					//if expanded, set visible height to shorter
					goalsExpanded ?	(goalsContainer.style.height = expandedHeightGoals + "px") : false;
				}
				
				//if everything fits on one line, hide expand button
				if(lowestGoal <65 ){
					expandGoalsButton.style.visibility = "hidden";
				}
			}
		}
	
	//Premises
		//make sure there are at least one goal (the fourth child) and that the user did something with a goal
		if (premisesContainer.children[3])
		{
			
			var lowestPremise = premisesContainer.lastChild.offsetTop - 5 + 63;  //minus margin, plus total height
			
			if( (close !== "close") && (type == "premise") ){
				
				//if have premises on the second line
				if(lowestPremise > 65){
					//if premises container needs to be bigger
					if( lowestPremise > expandedHeightPremises ){
						expandedHeightPremises += 63;
					}
					//if doesn't need to be bigger, just set it to the expanded height
					premisesContainer.style.height = expandedHeightPremises + "px";
					expandPremisesButton.style.visibility = "visible";
					expandPremisesButton.style.webkitTransform = "rotate(270deg)";
					expandPremisesButton.title = "hide";
					premisesExpanded = true;
				}
				
			}else{//in the case that a node is being closed
				//if need less space, make container smaller
				if( (lowestPremise + 63) < expandedHeightPremises ){
					expandedHeightPremises -= 63;
					//if expanded, set visible height to shorter
					premisesExpanded ?	(premisesContainer.style.height = expandedHeightPremises + "px") : false;
				}
				
				//if everything fits on one line, hide expand button
				if(lowestPremise <65 ){
					expandPremisesButton.style.visibility = "hidden";
				}
			}
		}
}

function containerButton(){
	//FIX make this ask the user which kind of child they want to create?
		// or just have there be 3 buttons, like on node
	lastArgument.spawnChild('support');
	return;
}


function newCloseButton(self){
	var closeButton = document.createElement('div');
	
    closeButton.id = 'closeButton';
    closeButton.className = 'nodeButton';
    closeButton.title = "close";
    
	//adding listener with jQuery so jQuery can die() the event when div is dragged
    $(closeButton).on('click', function(event) { return self.close(event)} );
    
    return closeButton;
}


//support, evidence, and attack buttons for argument nodes only
function newSupportButton(self){
	var	supportButton = document.createElement('div');
	
    supportButton.id = 'supportButton';
    supportButton.className = 'nodeButton';
    supportButton.innerHTML = "+";
    supportButton.title = "new support";
    
    	//adding this way so can die() when dragged
    $(supportButton).on('click', function() { return self.spawnChild("support") });
    
    return supportButton;
}

function newEvidenceButton(self){
	var evidenceButton = document.createElement('div');
	
    evidenceButton.id = 'evidenceButton';
    evidenceButton.className = 'nodeButton';
    evidenceButton.title = "new evidence";
    
    //adding this way so can die() when dragged
    $(evidenceButton).on('click', function() { return self.spawnChild("evidence") });
    
    return evidenceButton;
}

function newAttackButton(self){
	var attackButton = document.createElement('div');
	
    attackButton.id = 'attackButton';
    attackButton.className = 'nodeButton';
    attackButton.innerHTML = "<>";
    attackButton.title = "new attack";
    
    $(attackButton).on('click', function() { return self.spawnChild("attack") });  //adding this way so can die() when dragged
    
    return attackButton;
}

//assist nodes are for co-arguments...points that must be made together to be valid
function newAssistButton(self){
	var assistButton = document.createElement('div');
	
	assistButton.id = "assistButton";
	assistButton.className = "nodeButton";
	assistButton.innerHTML = "+>";
	assistButton.title = "new assist";
	
	//parameters passed in: the type and the spawning node
	$(assistButton).on('click', function() { 
		//return self.spawnChild("assist", assistTarget, self);  //the return seems unnecessary 
		//if is an assist itself, the parent should spawn it because all assists assist first regular node
		if(self.displayedDiv.classList.contains("assist") ){
			self.parent.spawnChild("assist");
		}else{
			self.spawnChild("assist"); 
		}
	});  //adding this way so can die() when dragged
	
	return assistButton;
}

//Button Dimming/////////////
	
	//check if movement truly occured
	function didItMove (e, context, callback)
	{
	    	if( (oldMouseX != e.clientX) || (oldMouseY != e.clientY)){
	    		callback.call(context);
	    	}
	}
	
	
	//for dimming the buttons when typing
	Node.prototype.startTyping = function(){
		if(!typing){
			this.displayedDiv.classList.add("typing");
	
			oldMouseX = mouseX;
			oldMouseY = mouseY;
	
	       	var self = this;
	       	this.displayedDiv.addEventListener('mousemove', function (event){didItMove(event, self, self.movedMouse)}, false);
	        
	        typing = true;
	        }
	}
	
	Node.prototype.movedMouse = function(){
		this.displayedDiv.classList.remove("typing");
		typing = false;
		
		this.displayedDiv.removeEventListener('mousemove', function (event){didItMove(event, self, self.movedMouse)}, false);
	}
	
//end Button Dimming//////////////
